<template>
  <div>
    <div class="seek">
      <img src="https://akk.028wkf.cn/kdb-weapp-img/img/ss.png" alt />
      <input
        class="seekInput"
        type="text"
        v-model="seek"
        placeholder="输入商品名称"
        @change="seekInput"
      />
      <button class="seekBtn" @click="seekBtn">搜索</button>
    </div>
    <div class="hint">请在上架商品中选择参加拼团的商品</div>

    <div class="list">
      <scroll-view
        class="scroll-wrap no-scroll-bar"
        style="height:calc(100% - 10px)"
        scroll-y
        @scrolltolower="handleLoadMore"
      >
        <div class="shopsList" v-for="(item,index) in orderList" :key="index">
          <div class="shopsListCheck">
            <i-checkbox-group @change="onChange">
              <i-checkbox
                :name="item.id"
                :key="index"
                :checked="item.state === '0' ? true : false"
                color="#5b94f6"
              ></i-checkbox>
            </i-checkbox-group>
          </div>
          <div class="shopsListImg">
            <img :src="item.goodsImg" alt />
          </div>
          <div class="shopsListCont">
            <span>{{item.goodsName}}</span>
            <p>￥{{item.goodsAmount}}</p>
            <label>库存：{{item.goodsStock}}</label>
          </div>
          <div class="shopsListState">已上架</div>
        </div>
        <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
      </scroll-view>
    </div>

    <div class="okBtn">
      <div class="checkAsll">
        <i-checkbox-group @change="onAllChange">
          <i-checkbox :checked="isAllShops" value="全部" color="#5b94f6"></i-checkbox>
        </i-checkbox-group>
      </div>
      <button
        class="handleClick"
        @click="handleClick"
        type="primary"
        long="true"
      >确定</button>
    </div>
  </div>
</template>

<script>
import { FIND_SHOP_GOODS_PAGE } from '@/api'

export default {
  components: {},
  data () {
    return {
      form: '',
      seek: '',
      // current: [], // weapp的
      // list: ['a', 'b', 'c'], // weapp的
      shopsListId: [], // 所有商品
      isAllShops: false,
      currentPage: 1,
      orderList: [],
      alreadyLastPage: false
    }
  },
  onShow () {
    this.init()
    this.checkAllFun()
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  methods: {
    seekInput (e) {
      const vm = this
      vm.seek = e.mp.detail.value
    }, // 搜索框
    seekBtn () {
      const vm = this
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm._findShopList()
    }, // 搜索按钮
    // handleFruitChange (e) {
    //   const index = this.current.indexOf(e.mp.detail.value)
    //   index === -1
    //     ? this.current.push(e.mp.detail.value)
    //     : this.current.splice(index, 1)
    // }, // weapp选项框
    onChange (e) {
      const vm = this
      let isChecked = e.target.current
      let checkedNum = Number(e.target.dataset.eventid.split('-')[1])
      vm.orderList.forEach((e, i) => {
        if (i === checkedNum) {
          if (isChecked) {
            e.state = '0'
          } else {
            e.state = '1'
          }
        }
      })
      let listLength = vm.orderList.length
      let num = 0
      for (let j = 0; j < listLength; j++) {
        if (vm.orderList[j].state === '0') {
          num++
        }
      }
      if (num === listLength) {
        vm.isAllShops = true
      } else {
        vm.isAllShops = false
      }
    }, // 选项框
    onAllChange (e) {
      const vm = this
      vm.isAllShops = e.target.current

      if (vm.isAllShops) {
        vm.orderList.forEach(_ => {
          _.state = '0'
        })
      } else {
        vm.orderList.forEach(_ => {
          _.state = '1'
        })
      }
    }, // 全部按钮
    checkAllFun () {
      const vm = this
      for (let i = 0; i < vm.orderList.length; i++) {
        vm.shopsListId.push(String(vm.orderList[i].id))
      }
      vm.shopsListId.sort(vm.sortNumber)
    }, // 全选
    handleClick () {
      const vm = this
      let list = []
      vm.orderList.forEach(_ => {
        if (_.state === '0') {
          list.push(_)
        }
      })
      if (list.length < 1) {
        vm.smallHintFrame('还没有关联商品~~~')
      } else {
        let item = JSON.stringify(list)
        vm.$cookie.set('groupUpdataList', item)
        vm.$router.go(-1)

        // vm.$router.replace('/pages/home/group/new-group-booking/main')
        // vm.$router.replace(
        //   '/pages/home/group/new-group-booking/main?item=' + item
        // )
        // this.$router.push(
        //   '/pages/home/group/new-group-booking/main?item=' + item
        // )
      }
    }, // 确定按钮
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._findShopList()
      }
    },
    _findShopList () {
      const vm = this
      let params = { ...vm.form }
      params.goodsKind = 'NORMAL'
      params.shopId = vm.account.shopId
      params.state = 1
      params.goodsName = vm.seek

      FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { isFirstPage, isLastPage } = r.data.data
            let list = r.data.data.list

            if (vm.$root.$mp.query.goodsList === 'undefined') {
              vm.printList(list, isFirstPage, isLastPage)
            } else {
              let goodsList = JSON.parse(vm.$root.$mp.query.goodsList)
              list.forEach(_ => {
                goodsList.forEach(e => {
                  if (_.goodsNo === e.goodsNo) {
                    // console.log(_)
                    _.state = '0'
                  }
                })
              })
              // console.log(list)
              vm.printList(list, isFirstPage, isLastPage)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 商品列表
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.orderList = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.orderList.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.orderList.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    },
    init () {
      this.orderList = []
      this.isAllShops = false
      this.currentPage = 1
      this.alreadyLastPage = false
      this._findShopList()
    },
    smallHintFrame (value) {
      wx.showToast({
        title: value,
        icon: 'none',
        duration: 2000
      })
    }, // 小提示框
    sortNumber (a, b) {
      return a - b
    }
  }
}
</script>

<style lang="scss">
.seek {
  width: 340px;
  margin: auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0%, -50%);
  }
  .seekInput {
    width: 200px;
    height: 18px;
    border-radius: 25px;
    border: 1px solid #bbbbbb;
    padding-left: 30px;
    font-size: 14px;
    color: #bbbbbb;
  }
  .seekBtn {
    width: 60px;
    height: 28px;
    line-height: 28px;
    background: #00a9f7;
    border-radius: 25px;
    font-size: 14px;
    color: #fff;
  }
}
.hint {
  width: 340px;
  margin: 10px auto;
  font-size: 14px;
  line-height: 20px;
  border-bottom: 1px solid #bbbbbb;
  color: #0076ff;
}
.list {
  @import 'static/styles/color.scss';

  height: calc(100% - 170px);
  > .scroll-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // box-shadow: 0 0 8px lighten(#5c94fc, 20%);
    height: 80px;
    position: relative;
    overflow: hidden;
    transform: translateY(10px);
  }
  .shopsList {
    width: 340px;
    height: 80px;
    margin: auto;
    display: flex;
    align-items: center;
    // .shopsListCheck {
    // width: 30px;
    // height: 100px;
    // display: flex;
    // align-items: center;
    // .van-checkbox__icon {
    //   width: 25px;
    //   height: 25px;
    //   line-height: 27px;
    // }
    // }
    .shopsListImg {
      margin: 0 10px;
      img {
        width: 60px;
        height: 60px;
      }
    }
    .shopsListCont {
      font-size: 14px;
      width: 150px;
      color: #000;
      span {
        width: 150px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        color: #e51c23;
      }
    }
    .shopsListState {
      height: 60px;
      font-size: 14px;
      font-weight: 600;
      color: #f9230e;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }
  }
  .end-tip {
    margin: 0;
    padding: 15px;
    text-align: center;
    color: $gray;
    font-size: 15px;
  }
}

.checkAsll {
  width: 340px;
  margin: auto;
  font-size: 14px;
  // position: fixed;
  // bottom: 60px;
  // z-index: 5;
  .van-checkbox__icon {
    width: 25px;
    height: 25px;
    line-height: 27px;
  }
}
.okBtn {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 3;
  .handleClick {
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    user-select: none;
    font-size: 14px;
    border-radius: 2px;
    border: 0 !important;
    position: relative;
    text-decoration: none;
    height: 44px;
    line-height: 44px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    color: #fff !important;
    margin: 10px;
    background: #508ff9;
  }
}
</style>

